<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>使用 layDate 独立版</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">

  <style>
  body{padding: 20px;}
  .SelectWeekBoxcom .SelectYearInput{
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    border-radius: 0px 2px 2px 0px;
    outline: none;
    margin-left: -2px;
  }
  .SelectWeekBoxcom .select span{
    height: 30px;
    width: 40px;
    display: block;
    float: left;
        font-size: 12px;
    line-height: 30px;
    text-align: center;
    border: 1px solid #DDD;
    box-sizing: border-box;
    margin-right: -1px;
    margin-top: -1px;
    cursor: pointer;
    background: #FFF;
  }

  .SelectWeekBoxcom .select span:nth-child(1),
  .SelectWeekBoxcom .select span:nth-child(9),
  .SelectWeekBoxcom .select span:nth-child(17),.SelectWeekBoxcom 
  .SelectWeekBoxcom .select span:nth-child(25),
  .SelectWeekBoxcom .select span:nth-child(33),
  .SelectWeekBoxcom .select span:nth-child(41),
  .SelectWeekBoxcom .select span:nth-child(49){
    border-left:none;
  }


  .SelectWeekBoxcom .select span:nth-child(49),
  .SelectWeekBoxcom .select span:nth-child(50),
  .SelectWeekBoxcom .select span:nth-child(51),
  .SelectWeekBoxcom .select span:nth-child(52),
  .SelectWeekBoxcom .select span:nth-child(53),
  .SelectWeekBoxcom .select span:nth-child(54){
    border-bottom:none;
  }

  .SelectWeekBoxcom .select span:hover{
        background:#009688!important;
        color: #FFF;
  }

  .SelectWeekBoxcom .SelectWeekBox {
    position: relative;
  }

  .SelectWeekBoxcom .SelectWeekBox .select{
    background: #fdfdfd;
    position: absolute;
    left: 0px;
    top: 9px;
    display: inline;
    border: 1px solid #e2e2e2;
    box-shadow: 0px 1px 1px rgba(0,0,0,.12);
    background-color: #fff;
    color: #484848;
    font-size: 12px;
    width: 312px;
    overflow: hidden;
    margin-top: 20px;
    border: 1px solid #d2d2d2;
    display: none;
    border-radius: 2px;
  }

  .SelectWeekBoxcom .SelectYear{
    padding-left: 10px;
    height: 30px;
    line-height: 30px;
    border: 1px solid #e6e6e6;
    background-color: #fff;
    border-radius: 2px;
    outline: none;
  }


  </style>
</head>
<body>




  <div id="SelectWeekBoxcom"></div>


    <div id="SelectWeekBoxcom1"></div>

  <script src="js/jquery-1.10.2.js"></script>

  <script src="laydate/laydate.js"></script>

  <script>

$.GWT = {};
$.GWT.UI = {};
$.GWT.UI.SelectWeekBoxcom = {
    defaults: {
        el: "#SelectWeekBoxcom",
        callback:function(){

        }
    },
    create: function(options) {
        var self = this;
        var settings = $.extend({}, self.defaults, options);
        var SelectWeekBoxcom = new $.GWT.UI.SelectWeekBoxcom.Constructor(settings);
        SelectWeekBoxcom.init(settings);
        return SelectWeekBoxcom;
    }
};


$.GWT.UI.SelectWeekBoxcom.Constructor = function(options) {
    this.settings = options;
};

$.GWT.UI.SelectWeekBoxcom.Constructor.prototype = {
    init: function(options) {
        var setting = $.extend({}, this.defaults, options);
        this.CreateDom(setting.el);
        this.SelectYear(setting.el,setting.callback);
    },
    CreateDom: function(el) {
        var htmlDom = '<input type="text" class="SelectYearInput SelectYear" style="width: 60px;" placeholder="选择年份" id="SelectYear">' + '<span id="SelectWeekBox" class="SelectWeekBox">' + '<input type="text" class="SelectWeek SelectYearInput " style="width: 50px;" placeholder="选择周" id="SelectWeek">' + '<span class="select"></span>' + '</span>'
        $("" + el).html(htmlDom).addClass('SelectWeekBoxcom');
    },
    SelectYear: function(el,callback) {
     

        laydate.render({
            elem: ""+el+">.SelectYear",
            type: 'year',
            format: 'yyyy年',
            done: function(date) {
                 
                var dataNum = parseInt(date.substr(0,4));
                var NumOfWeeks = getNumOfWeeks(dataNum);
                var spanDom = "";
                for (var i = 1; i <= NumOfWeeks; i++) {
                    spanDom += '<span title="2011-11-12到2011-12-13">' + (i <= 9 ? '0' + i : i) + '周</span>';
                }
                $(""+el).find('.select').children().remove();
                $(""+el).find('.select').html(spanDom);
                $(""+el).find('.select span').on('mouseover', function(event) {
                    /* Act on the event */
                    $(""+el).find(".SelectWeek").val("第"+$(this).text());
                    var d = new Date(dataNum, 0, 1).getDay()
                    var addDay = null;
                    var end = null;
                    var firstWeekStart = new Date(dataNum, 0, 1)
                    if (d == '0') {
                        end = 1;
                    } else {
                        end = 1 + (7 - d);
                    }
                    var firstWeekEnd = new Date(dataNum, 0, end);
                    var week = $(this).text().substring(0, 2);
                    var chooseWeek = null;
                    if (week.substr(0, 1) == 0) {
                        chooseWeek = week.substr(1, 2)
                    } else {
                        chooseWeek = week
                    }
                    var chooseWeekStar = null;
                    var chooseWeekEnd = null;
                    if (chooseWeek == 1) {
                        chooseWeekStar = firstWeekStart;
                        chooseWeekEnd = firstWeekEnd;
                    } else if (chooseWeek == 2) {
                        chooseWeekStar = new Date(dataNum, 0, end + 1);
                        chooseWeekEnd = new Date(dataNum, 0, (chooseWeek - 1) * 7 + end)
                    } else if (chooseWeek == NumOfWeeks) {
                        chooseWeekStar = new Date(dataNum, 0, (chooseWeek - 1) * 7 + 1)
                        var yt = ((dataNum % 4 == 0 && dataNum % 100 != 0) || dataNum % 400 == 0) ? 366 : 365;
                        chooseWeekEnd = new Date(dataNum, 0, yt)
                    } else {
                        chooseWeekStar = new Date(dataNum, 0, (chooseWeek - 2) * 7 + 1 + end);
                        chooseWeekEnd = new Date(dataNum, 0, (chooseWeek - 1) * 7 + end)
                    }



                    
                    var startYear = chooseWeekStar.getFullYear();
                    var startMonth = chooseWeekStar.getMonth() + 1;
                    var startDay = chooseWeekStar.getDate();
                    chooseWeekStar = getTime(startYear, startMonth, startDay)
                    var endYear = chooseWeekEnd.getFullYear();
                    var endMonth = chooseWeekEnd.getMonth() + 1;
                    var endDay = chooseWeekEnd.getDate();
                    chooseWeekEnd = getTime(endYear, endMonth, endDay)
                    // console.log(""+date+"年第"+chooseWeek+"周开始时间:"+chooseWeekStar+" ,结束时间:"+chooseWeekEnd)
                    // console.log(""+date+"年第"+chooseWeek+"周开始时间:"+chooseWeekStar+" ,结束时间:"+chooseWeekEnd);
                    $(this).attr({
                        title: chooseWeekStar + "到" + chooseWeekEnd
                    });
                }).on('click', function(event) {
                    $(".select").hide();

                      var weekNum = $(""+el).find(".SelectWeek").val().substr(1,2);
                   
                      var year =date.substr(0,4)

                    callback(year,weekNum);
                 
                 
                    
                });
               
            }
        });



     

  


        $(""+el).find(".SelectWeek").on('click', function(event) {
          if($(""+el).find('.SelectYear').val()==""){
            // $(""+el).find(".SelectYear").css({
            //   border: '1px solid red'
            // });
          }else{
             $(""+el).find(".select").show();
          }
        });

        function getTime(year, month, day) {
            return year + "-" + changeLength(month) + "-" + changeLength(day);
        }

        function changeLength(time) {
            if (("" + time).length == 1) {
                return "0" + time;
            } else {
                return time;
            }
        }

        function getNumOfWeeks(year) {
            var d = new Date(year, 0, 1).getDay()
            var yt = ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) ? 366 : 365;
            var myweek = null;
            var pengpengweek = null;
            var myday = null;
            if (d == '0') {
                myday = yt - 1;
            } else(myday = yt - (8 - d))
            myweek = Math.ceil(myday / 7.0) + 1;
            return myweek;
        }



        $(document).on('click',  function(event) {
          $(""+el).find('.select').hide();
        });

       $(""+el).find(".SelectWeek").on('click', function(event) {
         event.stopPropagation();
       });




    }


};


$.GWT.UI.SelectWeekBoxcom.create({
    el: "#SelectWeekBoxcom",
    callback:function(year,weekNum){
          console.log(year);   
          console.log(weekNum);    
    }
})  



$.GWT.UI.SelectWeekBoxcom.create({
    el: "#SelectWeekBoxcom1",
    callback:function(year,weekNum){
          console.log(year);   
          console.log(weekNum);    
    }
})  


















</script>
</body>
</html>